<template>
  <div class="view-wrapper">
    <!-- <v-head></v-head> -->

    <div class="view-con">
      <div class="breadcrumb">
		  <!-- 头部 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <template v-for="item in breadcrumbList">
            <el-breadcrumb-item :key="item">{{ item }}</el-breadcrumb-item>
          </template>
        </el-breadcrumb>
      </div>
      <div class="con">
		  
        <transition name="move" mode="out-in">
          <keep-alive :max="5">
            <router-view></router-view>
          </keep-alive>
        </transition>
        <v-footer></v-footer>
      </div>
    </div>
  </div>
</template>

<script>
import vHead from "common/Header.vue";
import vFooter from "common/Footer.vue";

export default {
  created() {
	  
    this.breadcrumbList = this.$route.matched.map((_) => {
      return _.meta.title;
    });
  },
  data() {
    return {
      breadcrumbList: [],
    };
  },
  components: {
    vHead,

    vFooter,
  },
  computed: {},
};
</script>

<style scoped>
.view-wrapper {
  width: 99.7%;
  height: 100%;
}
.view-con {
  background-color: rgb(2, 16, 51);
  display: flex;
  flex-direction: column;
  width: 100%;
  height: calc(100vh - 21px);
  /* height: calc(100% - 21px); */
}
.breadcrumb >>> .el-breadcrumb span {
  color: #fff;
}
.breadcrumb {
  height: 20px;
  display: grid;
  align-content: center;
}
.con {
  flex: 1;
  height: 98%;
}
/* 隐藏滚动条 */
::-webkit-scrollbar {
  width: 0 !important;
}
::-webkit-scrollbar {
  width: 0 !important;
  height: 0;
}
</style>
